<template>
  <div class="song-list">
    <slot name="top" />
    <ul class="list">
      <li class="song" v-for="(song, index) of list" :key="index">
        <div class="rank icon">
          <slot name="rank" :song='song' :index='index'>
            <span>{{ index + 1 }}</span>
          </slot>
        </div>
        <div class="content" @click="selectItem(song, index)">
          <slot name="content" :song='song' :index='index'>
            <div class="content-warpper">
              <div class="content-inner">
                <div class="name">
                  {{ song.name }}
                </div>
                <div class="artists">
                  {{ song.artistsNames }} + {{ song.al.name }}
                </div>
              </div>
            </div>
          </slot>
        </div>
        <div class="icon" v-if="listBtn" @click="clickBtn(song, index)">
          <slot name="btn">
            <i class="iconfont icon-ziyuan"/>
          </slot>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
    listBtn: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    selectItem(song, index) {
      this.$emit('selectItem', song, index)
    },
    clickBtn(song, index) {
      this.$emit('clickBtn', song, index)
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/style/variable.less';
@import '~@/style/mixins.less';

.song-list{
  .icon{
    width: 60px;
    text-align: center;
    i{
      font-size: 1.2em;
    }
  }
  .list{
    .song{
      display: flex;
      height: 60px;
      line-height: 60px;
      .rank{
        position: relative;
        color: @text-color-light;
      }
      .content{
        align-items: center;
        justify-content: center;
        display: flex;
        flex: auto;
        padding-right: 5px;
        .content-warpper{
          width: 100%;
          display: flex;
          .content-inner{
            width: 0;
            flex: auto;
            .name,.artists{
              .ellipsis();
              width: 100%;
              height: 50%;
              line-height: 25px;
            }
            .name{
              font-size: @font-size-normal;
            }
            .artists{
              font-size: @font-size-mini;
              color: @text-color-light;
            }
          }
        }
      }
    }
  }
}
</style>